iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法系列 第 21

Day 21. 透過實作設計一個登入頁面,掌握 Figma 基本工具

  • 分享至 

  • xImage
  •  

今天來設計每個網頁幾乎都會有的登入頁面吧!跟著 Rson 一起實作完,就能做出下面這張設計稿:
https://ithelp.ithome.com.tw/upload/images/20211006/20105528ixTnmNng6X.png

分二塊來實作,首先先繪製容器及左半部 Sign-up 的部份,再來繪製右半部 Sign-in 區塊


1. 點擊矩形工具,畫一個矩形

https://images.tango.us/public/screenshot_32f21dc3-94a3-4cc8-aab5-8ef40d37dab1?crop=focalpoint&fit=crop&fp-x=0.1533&fp-y=0.1361&fp-z=3.947799385875128&w=undefined&ar=2880%3A1452

2. 點擊 [+] effect,準備畫陰影

https://images.tango.us/public/screenshot_5f3457bf-ae8c-4af0-8555-bda902d7a008?crop=focalpoint&fit=crop&fp-x=0.7997&fp-y=0.739&fp-z=1.9215278954976651&w=undefined&ar=2880%3A1452

3. 微調陰影,提高 Blur 值較自然

https://images.tango.us/public/edited_image_9320ddc6-16d2-4ec8-9de3-ef4a849d2cec?crop=focalpoint&fit=crop&fp-x=0.7499&fp-y=0.8415&fp-z=2.142857142857143&w=undefined&ar=2880%3A1452

4. 加上圓角 (預設四角都會等圓)

https://images.tango.us/public/screenshot_10ec3727-a13b-4c3b-a44d-a480b57d39e3?crop=focalpoint&fit=crop&fp-x=0.946875&fp-y=0.2493112947658402&fp-z=2.9536208299430435&w=undefined&ar=2880%3A1452

5. 再畫左方的矩形,並且填色

https://images.tango.us/public/screenshot_ad1eafae-f281-4015-86bc-6428e58dd7d7?crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&fp-z=1&w=undefined&ar=2880%3A1452

6. 因為下面的容器有圓角,所以墊在上面的這個矩形也要有圓角

圓角可自訂四個角不同數值

https://images.tango.us/public/screenshot_73bebf79-f481-4b32-b2f8-86e7e380e3e6?crop=focalpoint&fit=crop&fp-x=0.9833333333333333&fp-y=0.2988980716253444&fp-z=3.1870061457418792&w=undefined&ar=2880%3A1452

7. 給予四個角不同數值

與css概念相同,依序為左上、右上、右下、左下 (順時針)

https://images.tango.us/public/edited_image_e02da981-19b1-49a2-a6a5-bcc588fb17fd?crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&fp-z=1&w=undefined&ar=2880%3A1452

8. 接著製作 Sign-up 幽靈按鈕

(1) 拉出一個矩形(2) 圓角拉調到最大(3) 關閉填色(4) 增加線段 (1px, 白色)

https://images.tango.us/public/edited_image_5ae1d6d6-6ebe-4445-9865-ec8375c786cc?crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&fp-z=1&w=undefined&ar=2880%3A1452

9. 拉出按鈕的字,上下與左右都設定成置中

記得將按鈕群組起來

https://images.tango.us/public/edited_image_f57e1533-f6bc-4157-9443-3ec8c0923ea9?crop=focalpoint&fit=crop&fp-x=0.6499&fp-y=0.6499&fp-z=1.4285714285714275&w=undefined&ar=2880%3A1452

10. 設定畫布底色,並調整置中對齊。左半邊就完成嘍

https://images.tango.us/public/image_7caf8224-5473-45ca-801e-153936cfe5bf?crop=focalpoint&fit=crop&w=undefined&ar=1772%3A1106

11. 接著處理右半部: 首先依剛學會的,使用 Text 工具拉出 標題 及 [忘記密碼] 次級連結

https://images.tango.us/public/edited_image_19d16ce6-a743-4e49-98c8-f1f6af01173f?crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&fp-z=1&w=undefined&ar=2880%3A1452

12. 依上面學會的方式,再製作一個主要按鈕,給 Sign in 使用

https://images.tango.us/public/edited_image_3dc0ab28-921f-4878-ba40-c90371131c88?crop=focalpoint&fit=crop&fp-x=0.7401&fp-y=0.6403&fp-z=1.9240923791960463&w=undefined&ar=2880%3A1452

13. 繪製帳號密碼文字輸入框:以矩形工具拉出圓角矩形,並給予 Fill 及 Stroke

Tip:只要是要需要上色的,都可以用吸管工具吸色後再微調

https://images.tango.us/public/edited_image_b2cc722e-b3a2-48b8-bcf4-a5ecbdf39bb3?crop=focalpoint&fit=crop&fp-x=0.5&fp-y=0.5&fp-z=1&w=undefined&ar=2880%3A1452

14. 加上輸入提示字

Tip:placeholder 一般都會用淺淺的灰色

https://images.tango.us/public/edited_image_1a1a6e55-dfc9-4f1d-84e0-c3befe0a1de9?crop=focalpoint&fit=crop&fp-x=0.4999&fp-y=0.5411&fp-z=0.9240923791960463&w=undefined&ar=2880%3A1452

15. 將做好的 文字輸入框,復製一份,更改提示字為密碼

https://images.tango.us/public/edited_image_926a143d-8659-4733-9032-9a3515db44f2?crop=focalpoint&fit=crop&fp-x=0.4999&fp-y=0.5411&fp-z=0.9240923791960463&w=undefined&ar=2880%3A1452

16. 太好了!我們已經完成了第一個 Log-in 頁面設計!

https://ithelp.ithome.com.tw/upload/images/20211006/2010552867oHUzS40t.png


回顧一下,透過這個實作的設計練習,我們已掌握了 Figma 的基本形狀工具、物件屬性設定(stroke, fill, effect),以及文字的對齊、大小等屬性的基本調整方式。


上一篇
Day 20. 用 Figma 來設計基本 icon 吧!
下一篇
Day 22. RWD 響應式設計的利器- 理解 Figma 的 Constraints 機制
系列文
網頁 UX / UI 攻心術|30天練成 Figma、Axure RP 以及 UX 心法30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言